<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<title>表单</title>
	<style>
		.big {
			width: 500px;
			height: 700px;
			background: whitesmoke;
			margin: 0 auto;
			align-items: center;
			justify-content: center;
			
		}
		.shang{
			width: 500px;
			height: 50px;
			background: white;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.zhong1{
			width: 500px;
			height: 700px;
			background: whitesmoke;
			display: flex;
			flex-direction: column;	
		}
		.zhong2{
			width: 500px;
			height: 600px;
			background: whitesmoke;
			display: flex;
			align-items: flex-end;
			justify-content: center;
		}
		.xia{
			width: 500px;
			height: 100px;
			background: whitesmoke;
			display: flex;
			
		}
		.a{
			width: 250px;
			height: 100px;
			background: whitesmoke;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var FormData = document.getElementById("form")
				var submit_button = document.getElementById("submit")
				var reset_button = document.getElementById("reset")
				submit_button.onclick = function() {
					var array = []
					var check = FormData.hobby
					for(var i = 0; i < check.length; i++){
						if(check[i].checked) {
							array.push(check[i].value)
						}
					}
					var str = ""
					str += "用户名:" + FormData.username.value
					str += "\n密码:" + FormData.userpassword.value
					str += "\n确认密码:" + FormData.checkpassword.value
					str += "\n性别:" + FormData.usersex.value
					str += "\n爱好:" + array.join(',')
					str += "\n专业: " + FormData.specialty.value
					str += "\n个人简介:" + FormData.userinfo.value
					str += "\n个人头像：" + FormData.usericon.value
					alert(str);
				}
				reset_button.onclick = function() {
					alert("重置成功")
				}
			
			}
	</script>
	</head>
	<body>
		<div class="big">
			<div class="shang">
				<h1><b>表单</b></h1>
			</div>
			<div class="zhong1">
				<div class="zhong2">
					<form action="" method="post" id="form" >
							用户名：<input type="text" name="username" placeholder="请输入用户名" maxlength="10"/>  请校对信息是否正确<br />
							<p></p><br /><p></p>	
							密码：<input type="password" name="userpassword" placeholder="请输入密码" maxlength="16"/><br />
							<p></p><br /><p></p>
							确认密码：<input type="password" name="checkpassword" placeholder="请再次输入密码" maxlength="16"/><br />
							<p></p><br /><p></p>
							性别：<input type="radio" name="usersex" value="男" />男<input type="radio" name="usersex" value="女" />女<input type="radio" name="usersex" value="保密"/>保密<br />
							<p></p><br /><p></p>
							爱好：<input type="checkbox" name="hobby" value="篮球" />篮球<input type="checkbox" name="hobby" value="跑步" />跑步<input type="checkbox" name="hobby" value="游泳" />游泳<br />
							<p></p><br /><p></p>
							专业：<select name="specialty">
			   						<option value="请选择专业">请选择专业</option>
									<option value="软件技术">软件技术</option>
									<option value="计算机技术">计算机技术</option>
							</select><br />
							<p></p><br /><p></p>
							个人简介：<textarea name="userinfo" rows="1" cols="30" maxlength="100"></textarea><br />
							<p></p><br /><p></p>
							个人头像：<input name="usericon" type="file" />
						</form>
				</div>
				<div class="xia">
					<div class="a">
						<input type="submit" id="submit" value="提交" />
					</div>
					<div class="a">
						<input type="reset" id="reset" value="重置" />
					</div>
				</div>	
			</div>	
		</div>	
	</body>
</html>
